[CSS] 스타일 속성 inset 알아보기

Last Modified : 2022-08-22 / Created : 2022-08-22

11,701
View Count

주소 복사하기

css 스타일 속성 중 하나인 inset에 대하여 알아보려고 합니다. inset은 무엇이고 언제 사용할 수 있는지 아래에서 알아보세요.

#css 속성 inset은?

inset은 태그 요소의 위치를 결정하는 top, right, bottom, left의 축약 스타일 속성입니다. 즉 상하좌우를 각각의 css 속성으로 설정하지 않고 inset 하나만 사용하는 것이 가능합니다. 사실 inset을 사용하지 않더라도 top, right, bottom, left 등을 사용할 수 있겠습니다.

@ 활용 팁
자주 사용되지는 않지만 특정 엘리먼트의 위치를 조정하기 위한 방법 중 하나로 사용될 수 있습니다. 예를들어 엘리먼트의 위치 조정을 위해서 top, bottom, left, right를 많이 사용합니다. 이 외에도 또 어떤 스타일 속성이 있을까요? 엘리먼트 위치 위동을 위해서는 아래의 방법들이 존재할 것으로 생각됩니다.

top, bottom, left, right // 가장 먼저 떠오르는 스타일 속성
transform의 translate // 이 방법 역시 엘리먼트 위치 조절에 많이 쓰임
inset // 추가적인 방법으로 생각할 수 있음

위와 같이 1, 2번만 사용해도 되겠지만 애니메이션 구현시 이미 선언된 스타일 속성을 변경하지 않으면서 위치를 변경하기 위해 inset처럼 이 외의 방법을 알아두면 구현할 때 많은 도움이 될 수도 있습니다. 즉 기존의 스타일을 변경하지 않으면서도 위치를 변경하는 방법으로 다른 스타일 속성을 사용하는 것이 편리하고 쉬운 방법이기 때문이죠.

다음으로 아래는 간략한 문법입니다.

inset(top right bottom left)

사용 방법은 매우 간단합니다. 위와 같이 사용할 수도 있고 margin, padding 처럼 상하, 좌우를 구분해서 축약식으로 선언하여 사용하는 것 역시 가능합니다. 이 부분은 아래의 간략한 예제를 보면서 설명하면 좋겠습니다.

! css inset 예제보기

몇 가지 예제들입니다. 간략한 사용 방법과 문법 쓰임을 알아보기 위한 예제입니다. 먼저 외부에 outer-box 클래스의 엘리먼트를 하나 만들고 내부에 inner-box 클래스 요소의 위치를 변경하려고 합니다.

<div class="outer-box">
<div class="inner-box">inner</div>
</div>

확인하기 좋게 간략하게 스타일을 추가했습니다.

.outer-box {
position: relative;
background: #eee;
width: 200px;
height: 200px;
}
.inner-box {
position: absolute;
background: black;
width: 50px;
height: 50px;
}

이제 위 요소를 가지고 몇 가지 스타일을 적용한 예제를 구현해보겠습니다.

예제 1)
첫 번째 예제입니다. 상하 좌우 모든 값을 각각 추가하여 사용한 방법입니다.

inset: 10px 30px 50px 70px;

구현시 아래와 같이 나타나게 됩니다.

<div class="test">
<div class="outer-box">
<div class="inner-box">inner</div>
</div>
</div>
<style>
.test .outer-box {
position: relative;
background: #eee;
width: 200px;
height: 200px;
}
.test .inner-box {
position: absolute;
background: black;
width: 50px;
height: 50px;
inset: 10px 30px 50px 70px;
}
</style>

예제 2)
두 번째 예제로 하나의 값 50px만 설정하였습니다.

inset: 20px;

구현시 출력 결과입니다.

<div class="test2">
<div class="outer-box">
<div class="inner-box">inner</div>
</div>
</div>
<style>
.test2 .outer-box {
position: relative;
background: #eee;
width: 200px;
height: 200px;
}
.test2 .inner-box {
position: absolute;
background: black;
width: 50px;
height: 50px;
inset: 50px;
}
</style>

예제 3)
다음은 세 번째 예제로 두 개의 값을 각각 설정한 경우입니다.

inset: 20px 70px;

출력 결과는 아래와 같죠.

<div class="test3">
<div class="outer-box">
<div class="inner-box">inner</div>
</div>
</div>
<style>
.test3 .outer-box {
position: relative;
background: #eee;
width: 200px;
height: 200px;
}
.test3 .inner-box {
position: absolute;
background: black;
width: 50px;
height: 50px;
inset: 20px 70px;
}
</style>

예제 4)
마지막으로 세 개의 값을 설정한 경우입니다.

inset: 50px 50px 0px;

아래는 4번째 예제의 출력 결과입니다.

<div class="test4">
<div class="outer-box">
<div class="inner-box">inner</div>
</div>
</div>
<style>
.test4 .outer-box {
position: relative;
background: #eee;
width: 200px;
height: 200px;
}
.test4 .inner-box {
position: absolute;
background: black;
width: 50px;
height: 50px;
inset: 50px 50px 0px;
}
</style>

여기까지 몇 가지 예제를 사용한 inset css 속성을 알아보았습니다.

아래의 글도 찾고 계시지 않나요?

[css] 텍스트 outline 외곽선 구현하는 방법 알아보기

[nuxtjs] PostCSS 설치 및 사용하기